import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import './tabbottom.less';
import { useEffect, useState } from 'react';
import home1 from '@/assets/images/tabbar/home_1.png'; // 蓝色
import home2 from '@/assets/images/tabbar/home_2.png'; // 灰色
import my1 from '@/assets/images/tabbar/my_1.png'; // 蓝色
import my2 from '@/assets/images/tabbar/my_2.png'; // 灰色
import fast from '@/assets/images/tabbar/fast.png'; // 快速
import { useLocation, useNavigate } from 'react-router-dom';

const routes = ['/home', '/fast', '/mine'];

export default function TabBottom() {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    const idx = routes.indexOf(location.pathname);
    setValue(idx);
  }, [location.pathname]);

  const [value, setValue] = useState(0);
  return (
    <div className="tab-bot" style={{ display: value < 0 ? 'none' : 'block' }}>
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          navigate(routes[newValue]);
        }}
      >
        <BottomNavigationAction
          label="首页"
          icon={<img src={value === 0 ? home1 : home2} />}
        />
        <BottomNavigationAction label="快速刷题" icon={<img src={fast} />} />
        <BottomNavigationAction
          label="我的"
          icon={<img src={value === 2 ? my1 : my2} />}
        />
      </BottomNavigation>
    </div>
  );
}
